import React from 'react'
// ===================================================================== global declare
const { $Lazy, $fn } = window
// ===================================================================== private template
const Page = $Lazy.load(()=>import('#tp/page/page-container'))
const Tabs = $Lazy.load(()=>import('#tp/tabs/tabs'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		index:$fn.local('xgxt-report-index') || 0,
		pages: [
			{ component:$Lazy.state(()=>import('./cpt/a')) },
			{ component:$Lazy.state(()=>import('./cpt/b')) },
			{ component:$Lazy.state(()=>import('./cpt/c')) },
			{ component:$Lazy.state(()=>import('./cpt/d')) },
			{ component:$Lazy.state(()=>import('./cpt/e')) },
		]
	}
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
	}
	
	tabs = [{ title:'信息待录入', status:0},{ title:'样本待接收', status:1},{ title:'待审核', status:2},{ title:'已审核', status:3},{ title:'异常报告', status:3}]
	
	render(){
		const { index, pages, controls } = this.state
		return (
			<Page>
				{/* 选项卡 */}
				<Tabs
					defaultActiveKey = { index }
					data		= { this.tabs }
					onTabs 		= { (data, index) => {
						const _index = +index
						pages.forEach((v, i) => v.first = i === +index)
						$fn.local('xgxt-report-index', _index)
						this.setState({ index: _index, pages, controls: this['ref' + _index]?.controls?.() })
					}}
					controls	= { controls }
				/>
				
				{
					pages.map((v,i)=> v.first && (
			            <div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}>
			                <v.component 
			                    onRef   =   { ref => {
			                        this['ref' + i] = ref
									this.setState({ controls : this['ref' + i].controls() })
			                    }}
			                    onKeyChange	= { () => {
			                        this.setState({ controls : this['ref' + index]?.controls?.() })
			                    }}
			                    {...this.props}
			                />
			            </div>
			        ))
				}
			</Page>
		)
	}
}

export default Index